/**
 * 多行文本标签
 * @class
 * @extends graphic.div.BaseDiv
 */
import BaseDiv from "./BaseDiv.js";

class MultilineLabel extends BaseDiv {
  /**
   * 构造函数
   * @param {Object} options 配置参数
   * @param {Array.<Number>} [options.position=[111, 28, 0]] 经纬度[x,y,z]
   * @param {Array.<String>} options.content 文本内容数组
   * @param {Object} [options.style={}] 样式信息
   * @param {String} [options.style.color='#FFFFFF'] 文本颜色
   * @param {Number} [options.style.fontSize=14] 字体大小px
   * @param {String} [options.style.type='1'] 类型 1或2
   * @param {String} options.style.anchorImage type=2时，锚点图片
   * @param {Cesium.DistanceDisplayCondition} [options.style.distanceDisplayCondition={near: 0.1, far: 1000000}] 可视范围
   * @param {Boolean} [options.style.pointerEvents=true] DIV是否可以鼠标交互
   * @param {Boolean} [options.style.userSelect=false] 是否可以选中文本
   */
  constructor(options = {}) {
    // 初始化默认样式
    const defaultStyle = {
      color: "#FFFFFF",
      fontSize: 14,
      type: "1",
      distanceDisplayCondition: { near: 0.1, far: 1000000 },
      pointerEvents: true,
      userSelect: false,
    };

    // 合并样式
    const mergedOptions = {
      ...options,
      style: { ...defaultStyle, ...(options.style || {}) },
    };

    super(mergedOptions);

    // 初始化内容
    this._content = options.content || [];

    // 渲染文本内容
    this._renderContent();
  }

  /**
   * 获取或设置内容
   * @type {Array.<String>}
   */
  get content() {
    return this._content;
  }

  set content(value) {
    if (Array.isArray(value)) {
      this._content = value;
      this._renderContent();
    }
  }

  /**
   * 获取图元包围球
   * @readonly
   * @type {Cesium.BoundingSphere}
   */
  get boundingSphere() {
    return super.boundingSphere;
  }

  /**
   * 获取图元坐标 (笛卡尔)
   * @readonly
   * @type {Cesium.Cartesian3|null}
   */
  get cartesian3() {
    return super.cartesian3;
  }

  /**
   * 获取图元坐标串（笛卡尔）
   * @readonly
   * @type {Array.<Cesium.Cartesian3>}
   */
  get cartesian3Array() {
    return super.cartesian3Array;
  }

  /**
   * 获取几何坐标
   * @readonly
   * @type {Array}
   */
  get coordinates() {
    return super.coordinates;
  }

  /**
   * 获取 Div 图元的 dom 元素
   * @type {HTMLElement}
   */
  get domEle() {
    return super.domEle;
  }

  set domEle(element) {
    super.domEle = element;
    if (element) {
      this._renderContent();
    }
  }

  /**
   * 获取或设置图元是否进入编辑状态
   * @type {Boolean}
   */
  get editMode() {
    return super.editMode;
  }

  set editMode(value) {
    super.editMode = value;
  }

  /**
   * 获取几何类型
   * @readonly
   * @type {String}
   */
  get geometryType() {
    return super.geometryType;
  }

  /**
   * 获取图元所属分类
   * @readonly
   * @type {GraphicClassType}
   */
  get graphicClassType() {
    return super.graphicClassType;
  }

  /**
   * 获取图元类型
   * @readonly
   * @type {GraphicType}
   */
  get graphicType() {
    return super.graphicType;
  }

  /**
   * 获取图元 id 唯一标识
   * @readonly
   * @type {String}
   */
  get id() {
    return super.id;
  }

  /**
   * 获取或设置图元选中状态
   * @type {Boolean}
   */
  get isSelected() {
    return super.isSelected;
  }

  set isSelected(value) {
    super.isSelected = value;
  }

  /**
   * 获取或设置图元名称
   * @type {String}
   */
  get name() {
    return super.name;
  }

  set name(value) {
    super.name = value;
  }

  /**
   * 获取图元坐标（经纬度）
   * @readonly
   * @type {Array|null}
   */
  get position() {
    return super.position;
  }

  /**
   * 获取图元坐标串（经纬度）
   * @readonly
   * @type {Array.<Array>}
   */
  get positions() {
    return super.positions;
  }

  /**
   * 获取或设置图元备注
   * @type {String}
   */
  get remarks() {
    return super.remarks;
  }

  set remarks(value) {
    super.remarks = value;
  }

  /**
   * 获取或设置图元可见性
   * @type {Boolean}
   */
  get show() {
    return super.show;
  }

  set show(value) {
    super.show = value;
  }

  /**
   * 获取或设置图元样式
   * @type {Object}
   */
  get style() {
    return super.style;
  }

  set style(value) {
    super.style = value;
    this._updateLabelStyle();
    this._renderContent();
  }

  /**
   * 获取图元类型名称
   * @readonly
   * @type {String}
   */
  get typeName() {
    return super.typeName;
  }

  /**
   * 获取或设置用户数据
   * @type {Object}
   */
  get userData() {
    return super.userData;
  }

  set userData(value) {
    super.userData = value;
  }

  /**
   * 销毁对象
   */
  destroy() {
    this._content = null;
    super.destroy();
  }

  /**
   * 下载到本地
   * @param {String} name 文件名称
   */
  downloadToLocalFile(name) {
    return super.downloadToLocalFile(name);
  }

  /**
   * 触发事件
   * @param {*} type 事件类型
   */
  fire(type) {
    return super.fire(type);
  }

  /**
   * 对象是否已经销毁
   * @returns {Boolean}
   */
  isDestroyed() {
    return super.isDestroyed();
  }

  /**
   * 注销事件
   * @param {*} type 事件类型
   */
  off(type) {
    return super.off(type);
  }

  /**
   * 注册事件
   * @param {*} type 事件类型
   * @param {*} callback 回调函数
   */
  on(type, callback) {
    return super.on(type, callback);
  }

  /**
   * 设置图元坐标
   * @param {Array} position 坐标值，[x,y,z]
   */
  setPosition(position) {
    super.setPosition(position);
  }

  /**
   * 设置图元坐标串
   * @param {Array.<Array>} positions 坐标串，[[x,y,z],[x,y,z],...]
   */
  setPositions(positions) {
    super.setPositions(positions);
  }

  /**
   * 转为 GeoJson 对象
   * @returns {Object} 转换后的对象
   */
  toGeoJson() {
    const geoJson = super.toGeoJson();
    // 添加多行文本特有的属性
    geoJson.properties.content = this._content;
    geoJson.properties.labelStyle = this._style;
    return geoJson;
  }

  /**
   * 渲染文本内容
   * @private
   */
  _renderContent() {
    if (!this._domEle) return;

    // 清空现有内容
    this._domEle.innerHTML = "";

    const style = this._style;

    // 根据类型渲染不同样式（仅支持type=1和type=2，type=3已移至FilletLabel类）
    const type = String(style.type);
    if (type === "2") {
      this._renderType2();
    } else {
      this._renderType1();
    }
    // 更新标签样式
    this._updateLabelStyle();
  }

  /**
   * 渲染类型1的文本标签
   * @private
   */
  _renderType1() {
    if (!this._domEle) return;

    const container = document.createElement("div");
    container.className = "cesium-extensions-multiline-label-container type-1";

    // 添加每一行文本
    this._content.forEach((text) => {
      const line = document.createElement("div");
      line.className = "cesium-extensions-multiline-label-line";
      line.textContent = text || "";
      container.appendChild(line);
    });

    this._domEle.appendChild(container);
  }

  /**
   * 渲染类型2的文本标签（带锚点）
   * @private
   */
  _renderType2() {
    if (!this._domEle) return;

    const container = document.createElement("div");
    container.className = "cesium-extensions-multiline-label-container type-2";

    // 添加锚点图片（如果有）
    if (this._style.anchorImage) {
      const anchorImg = document.createElement("img");
      anchorImg.className = "cesium-extensions-multiline-label-anchor";
      anchorImg.src = this._style.anchorImage;
      anchorImg.style.display = "block";
      anchorImg.style.margin = "0 auto";
      container.appendChild(anchorImg);
    }

    // 添加每一行文本
    this._content.forEach((text) => {
      const line = document.createElement("div");
      line.className = "cesium-extensions-multiline-label-line";
      line.textContent = text || "";
      container.appendChild(line);
    });

    this._domEle.appendChild(container);
  }

  /**
   * 更新标签样式
   * @private
   */
  _updateLabelStyle() {
    if (!this._domEle) return;

    const style = this._style;

    // 对于类型1和2，使用现有的行元素样式设置
    const lines = this._domEle.querySelectorAll(
      ".cesium-extensions-multiline-label-line"
    );
    lines.forEach((line) => {
      line.style.color = style.color;
      line.style.fontSize = `${style.fontSize}px`;

      // 直接设置行元素的userSelect属性，确保文本选择功能生效
      line.style.userSelect = style.userSelect ? "text" : "none";
    });

    // 获取容器元素并设置pointerEvents属性
    const container = this._domEle.querySelector(
      ".cesium-extensions-multiline-label-container"
    );
    if (container) {
      container.style.pointerEvents = style.pointerEvents ? "all" : "none";
    }

    // 更新DOM元素基础样式
    super._updateDomStyle();
  }
}

// 导出类
export default MultilineLabel;
